  <style>
            .ano_select {
              border: none;
              background-color: #fc8b61;
              color: white;
              cursor: pointer;
            }
            .button-save:hover {
              background-color: #fc8b61 !important;
            }
            #content {
              width: 95%;
            }
            .container-fluid {
              min-height: 90% !important;
            }
            .orange-row {
              max-height: 67px !important;
            }
            .orange-row3 {
              min-height: 285px !important;
            }
            .orange-row.orange-row3 {
              display: flex !important;
              flex-direction: column !important;
            }
            /* Nunca escalar o body por media-query: o zoom do navegador reduz a viewport
               e isso fazia o dashboard sofrer uma segunda escala e desconfigurar. */
            body {
              transform: none !important;
              transform-origin: initial !important;
            }

            /* Visual do contador progressivo */
            .story-progress {
              display: flex;
              align-items: center;
              gap: 6px;
              width: 100%;
              height: 14px;
              padding: 0 2px;
              box-sizing: border-box;
            }
            .story-part {
              flex: 1 1 0;
              min-width: 8px;
              height: 6px !important;
              margin: 0 !important;
              background: rgba(255,255,255,.22) !important;
              border-radius: 999px !important;
              overflow: hidden;
              position: relative;
              box-shadow: inset 0 1px 2px rgba(0,0,0,.10);
            }
            .story-part::after {
              content: '';
              position: absolute;
              inset: 0;
              border-radius: inherit;
              border: 1px solid rgba(255,255,255,.12);
              pointer-events: none;
            }
            .story-fill {
              width: 0%;
              height: 100%;
              border-radius: inherit !important;
              background: linear-gradient(90deg, rgba(255,255,255,.62), rgba(255,255,255,.98)) !important;
              box-shadow: 0 0 5px rgba(255,255,255,.45);
              transition: width 1s linear;
            }
            .story-part.story-done {
              background: rgba(255,255,255,.36) !important;
            }
            .story-part.story-active {
              height: 8px !important;
              margin-top: -1px !important;
              margin-bottom: -1px !important;
              box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 8px rgba(255,255,255,.16);
            }
            .story-part.story-active .story-fill {
              box-shadow: 0 0 8px rgba(255,255,255,.75);
            }

            /* Cabeçalho: mantém a estrutura original, mas dá mais hierarquia ao contador. */
            .story-header-title {
              letter-spacing: .1px;
              text-shadow: 0 1px 2px rgba(0,0,0,.16);
            }
            .story-time {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              min-width: 30px;
              height: 24px;
              padding: 0 8px;
              border-radius: 999px;
              background: rgba(0,0,0,.12);
              border: 1px solid rgba(255,255,255,.16);
              font-size: 11px !important;
              font-weight: 700 !important;
              font-variant-numeric: tabular-nums;
              box-sizing: border-box;
            }

            /* Pequenos ajustes de acabamento sem alterar menu ou funcionamento. */
            .update-me-body {
              min-height: 100%;
              scrollbar-width: thin;
            }
            @media (max-width: 900px) {
              .story-progress { gap: 3px; }
              .story-part { min-width: 5px; }
            }
            .datatable-wrapper.no-header .datatable-container {
              border-top: 1px solid #d9d9d9;
            }
            .datatable-wrapper.no-footer .datatable-container {
              border-bottom: 1px solid #d9d9d9;
            }
            .datatable-bottom, .datatable-top {
              padding: 8px 10px;
            }
            .datatable-bottom > div:first-child,
            .datatable-bottom > nav:first-child,
            .datatable-top > div:first-child,
            .datatable-top > nav:first-child {
              float: left;
            }
            .datatable-bottom > div:last-child,
            .datatable-bottom > nav:last-child,
            .datatable-top > div:last-child,
            .datatable-top > nav:last-child {
              float: right;
            }
            .datatable-selector {
              padding: 6px;
            }
            .datatable-input {
              padding: 6px 12px;
            }
            .datatable-info {
              margin: 7px 0;
            }
            .datatable-pagination ul {
              margin: 0;
              padding-left: 0;
            }
            .datatable-pagination li {
              list-style: none;
              float: left;
            }
            .datatable-pagination li.datatable-hidden {
              visibility: hidden;
            }
            .datatable-pagination a {
              border: 1px solid transparent;
              float: left;
              margin-left: 2px;
              padding: 6px 12px;
              position: relative;
              text-decoration: none;
              color: #333;
              cursor: pointer;
            }
            .datatable-pagination a:hover {
              background-color: #d9d9d9;
            }
            .datatable-pagination .datatable-active a,
            .datatable-pagination .datatable-active a:focus,
            .datatable-pagination .datatable-active a:hover {
              background-color: #d9d9d9;
              cursor: default;
            }
            .datatable-pagination .datatable-disabled a,
            .datatable-pagination .datatable-disabled a:focus,
            .datatable-pagination .datatable-disabled a:hover,
            .datatable-pagination .datatable-ellipsis a {
              pointer-events: none;
              cursor: default;
            }
            .datatable-pagination .datatable-disabled a,
            .datatable-pagination .datatable-disabled a:focus,
            .datatable-pagination .datatable-disabled a:hover {
              cursor: not-allowed;
              opacity: .4;
            }
            .datatable-pagination .datatable-pagination a {
              font-weight: 700;
            }
            .datatable-table {
              max-width: 100%;
              width: 100%;
              border-spacing: 0;
              border-collapse: separate;
            }
            .datatable-table > tbody > tr > td,
            .datatable-table > tbody > tr > th,
            .datatable-table > tfoot > tr > td,
            .datatable-table > tfoot > tr > th,
            .datatable-table > thead > tr > td,
            .datatable-table > thead > tr > th {
              vertical-align: top;
              padding: 8px 10px;
            }
            .datatable-table > thead > tr > th {
              vertical-align: bottom;
              text-align: left;
              border-bottom: 1px solid #d9d9d9;
            }
            .datatable-table > tfoot > tr > th {
              vertical-align: bottom;
              text-align: left;
              border-top: 1px solid #d9d9d9;
            }
            .datatable-table th {
              vertical-align: bottom;
              text-align: left;
            }
            .datatable-table th a {
              text-decoration: none;
              color: inherit;
            }
            .datatable-filter, .datatable-sorter {
              display: inline-block;
              height: 100%;
              position: relative;
              width: 100%;
            }
            .datatable-sorter::after, .datatable-sorter::before {
              content: "";
              height: 0;
              width: 0;
              position: absolute;
              right: 4px;
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
              opacity: .2;
            }
            .datatable-sorter::before {
              border-top: 4px solid #000;
              bottom: 0;
            }
            .datatable-sorter::after {
              border-bottom: 4px solid #000;
              border-top: 4px solid transparent;
              top: 0;
            }
            .datatable-ascending .datatable-filter::after,
            .datatable-ascending .datatable-sorter::after,
            .datatable-descending .datatable-filter::before,
            .datatable-descending .datatable-sorter::before {
              opacity: .6;
            }
            .datatable-filter::before {
              content: "";
              position: absolute;
              right: 4px;
              opacity: .2;
              width: 0;
              height: 0;
              border-left: 7px solid transparent;
              border-right: 7px solid transparent;
              border-radius: 50%;
              border-top: 10px solid #000;
              top: 25%;
            }
            .datatable-filter-active .datatable-filter::before {
              opacity: .6;
            }
            .datatable-empty {
              text-align: center;
            }
            .datatable-bottom::after, .datatable-top::after {
              clear: both;
              content: " ";
              display: table;
            }
            table.datatable-table:focus tr.datatable-cursor > td:first-child {
              border-left: 3px #00f solid;
            }
            table.datatable-table:focus {
              outline: solid 1px black;
              outline-offset: -1px;
            }
            body {
              background-color: #ededed;
              margin: 0;
              padding: 0;
            }
            .main {
              height: 98vh;
              background-color: #f1f1f1ff;
              overflow-y: auto;
            }
            .column {
              height: 100%;
              padding: 20px;
            }
            .column2 {
              height: 100%;
              padding: 5px;
            }
            .header {
              background: linear-gradient(to right, #d04d1c, #f15a22);
              color: white;
              min-height: 60px;
              height: auto;
              display: flex;
              justify-content: center;
              align-items: center;
              border-bottom: 1px solid #E6E6FA;
              box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
              position: relative;
            }
            .header img {
              position: absolute;
              left: 10%;
              top: 50%;
              transform: translateY(-50%);
              width: 120px;
              height: auto;
            }
            .header h1 {
              font-size: clamp(18px, 2vw, 28px);
              font-weight: bold;
              text-align: center;
            }
            .row-content-1, .row-content-2 {
              min-height: 400px;
              height: auto;
              width: 100%;
            }
            .orange-row, .principal-row {
              background-color: white;
              margin-bottom: 10px;
              border-radius: 5px;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
              display: flex;
              justify-content: center;
              align-items: center;
              width: 98%;
              padding: 15px;
              margin-left: auto;
              margin-right: auto;
              min-height: 60px;
              height: auto;
              cursor: pointer;
              transition: background-color 0.3s ease;
              overflow: hidden;
            }
            .orange-row p {
              font-size: clamp(12px, 1.5vw, 18px);
              color: black;
            }
            .orange-row2 {
              background-color: #E6E6FA !important;
            }
            .principal-row {
              padding: 5px !important;
              min-height: 300px;
              height: auto;
              width: 98%;
            }
            .card-principal {
              padding: 0px !important;
            }
            .footer {
              background-color: #f7c48b;
              min-height: 30px;
              height: auto;
              display: flex;
              justify-content: center;
              align-items: center;
              font-family: sans-serif;
              font-weight: bold;
              color: orange;
              border-top: 2px solid #f7c48b;
            }
            .card3 {
              min-height: 250px;
              height: auto !important;
            }
            .full-all {
              width: 100% !important;
              height: 100% !important;
              padding: 0px !important;
            }
            .chart {
              width: 92%;
              height: 100%;
            }
            .button-save {
              display: flex;
              align-items: center;
              margin-left: 10px;
              padding: 10px;
              border: none;
              background-color: #fc8b61;
              color: white;
              cursor: pointer;
              border-radius: 5px;
            }
            .button-save:hover {
              background-color: #ff9c74;
            }
            .header-buttons {
              display: flex;
              gap: 10px;
              margin-left: auto;
            }
            .header-content {
              flex: 1;
              text-align: center;
            }
            .border {
              border: solid 2px !important;
            }
            .border-red {
              border: solid 2px red !important;
            }
            .col-md-2 {
              min-height: 100% !important;
            }
            .row-80 {
              min-height: 100% !important;
            }
            .card-principal {
              min-height: 95% !important;
            }
            .card {
              min-height: 55% !important;
            }

            .menu-lateral {
  max-height: 80vh !important;
  overflow-y: auto  !important;
  overflow-x: hidden !important; 
}


/* =========================================================
   REDESIGN VISUAL — preserva HTML/React/Angular/JS original
   ========================================================= */
:root {
  --dash-bg: #f4f6f8;
  --dash-card: #ffffff;
  --dash-border: #e3e7eb;
  --dash-text: #263238;
  --dash-muted: #6b7280;
  --dash-red: #e94235;
  --dash-red-dark: #c9342b;
  --dash-green: #188038;
  --dash-shadow: 0 2px 10px rgba(15, 23, 42, .07);
}

/* Fundo geral */
.main {
  background: var(--dash-bg) !important;
}

/* Mantém o cabeçalho e deixa-o mais limpo */
.header {
  min-height: 64px !important;
  background: linear-gradient(135deg, var(--dash-red-dark), var(--dash-red)) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.16) !important;
}

.header h1 {
  font-size: clamp(18px, 1.45vw, 25px) !important;
  letter-spacing: .1px;
}

/* Área principal */
.row-content-1,
.row-content-2 {
  min-height: 0 !important;
}

.column,
.column2 {
  padding: 10px !important;
}

/* Cards dos indicadores */
.orange-row,
.principal-row {
  background: var(--dash-card) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--dash-shadow) !important;
}

.orange-row {
  margin-bottom: 10px !important;
  transition: box-shadow .2s ease, transform .2s ease;
}

.orange-row:hover {
  box-shadow: 0 5px 16px rgba(15,23,42,.10) !important;
}

.orange-row p {
  color: var(--dash-muted) !important;
}

/* Cards dos gráficos — não altera IDs nem conteúdo */
.card,
.card4,
.card3,
.card-bairro {
  background: #fff !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--dash-shadow) !important;
  overflow: hidden;
}

.card .card-header,
.card4 .card-header,
.card3 .card-header,
.card-bairro .card-header {
  background: #fff !important;
  color: var(--dash-text) !important;
  border-bottom: 1px solid var(--dash-border) !important;
  border-left: 4px solid var(--dash-red) !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.card .card-body,
.card4 .card-body,
.card3 .card-body,
.card-bairro .card-body {
  background: #fff !important;
}

/* Evita que os gráficos sejam visualmente esmagados */
.card-principal {
  background: transparent !important;
}

/* Botão PAINEL */
#botao_tela .btn-success,
#modal_agravo_botao {
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.16) !important;
  font-weight: 600 !important;
}

/* Controles de apresentação */
.botoes-controle-painel {
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.15));
}

.botoes-controle-painel .btn {
  border-radius: 9px !important;
}

/* Modal/menu: mantém todas as funções originais */
.modal-content {
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0,0,0,.25) !important;
}

.modal-header {
  border-bottom: 1px solid var(--dash-border) !important;
}

/* Rodapé */
.footer {
  border-top: 1px solid var(--dash-border) !important;
}

/* Menu lateral de módulos existente */
.sidebar-modulos {
  padding: 16px !important;
}

.btn-mod {
  border-radius: 8px !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.btn-mod:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
}

/* Cards das salas */
.sala-card-btn {
  border-radius: 9px !important;
  border: 1px solid var(--dash-border) !important;
  box-shadow: 0 2px 7px rgba(15,23,42,.05) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.sala-card-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(15,23,42,.11) !important;
}

/* Títulos dos grupos */
.group-title {
  font-weight: 700 !important;
}

/* =========================================================
   LAYOUT ESTAVEL EM ZOOM DO NAVEGADOR
   Não escala o body. Em 110/125/150% o conteúdo se adapta
   à viewport disponível sem criar uma segunda escala.
   ========================================================= */
html, body {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
}

.main {
  width: 98% !important;
  min-height:100vh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.container-fluid {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.row-80 {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.row-80 > .col-md-2 {
  flex: 0 0 16.666667% !important;
  max-width: 16.666667% !important;
  min-height: 0 !important;
}

.row-80 > .card-principal {
  flex: 0 0 83.333333% !important;
  max-width: 83.333333% !important;
  min-height: 0 !important;
}

.card-principal {
  min-height: 0 !important;
}

.card-principal > .row {
  min-height: 0 !important;
}

/* =========================================================
   PAINEL CENTRAL COM ROLAGEM
   O conteúdo dos gráficos mantém suas dimensões originais.
   Quando o zoom reduz a viewport (ex.: 125%), somente a área
   central passa a rolar, sem redimensionar ou deslocar o menu.
   ========================================================= */
.row-80 {
  height: calc(100vh - 110px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

.row-80 > .col-md-2 {
  height: 100% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.painel-scroll {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  flex: 0 0 83.333333% !important;
  max-width: 83.333333% !important;
  box-sizing: border-box !important;
  padding-right: 4px !important;
  padding-bottom: 8px !important;
  scrollbar-gutter: stable;
}

.painel-scroll > #painel {
  width: 100% !important;
  min-width: 0 !important;
}

/* Mantém os quatro painéis com o tamanho definido pelo sistema.
   O excesso passa a ser tratado pelo scroll acima. */
.painel-scroll .card-principal {
  min-height: 0 !important;
}

.painel-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.painel-scroll::-webkit-scrollbar-track {
  background: #eef1f4;
  border-radius: 8px;
}

.painel-scroll::-webkit-scrollbar-thumb {
  background: #aeb7c2;
  border-radius: 8px;
  border: 2px solid #eef1f4;
}

.painel-scroll::-webkit-scrollbar-thumb:hover {
  background: #8e99a6;
}

/* Em zoom elevado, os espaços laterais não podem consumir a viewport. */
@media screen and (max-width: 1600px) {
  .column { padding: 8px !important; }
  .column2 { padding: 4px !important; }
  .orange-row { width: 100% !important; }
  .principal-row { width: 100% !important; }
  .card-principal > .row { margin-left: 0 !important; margin-right: 0 !important; }
}

@media screen and (max-width: 992px) {
  .card-principal > .row {
    display: block !important;
  }

  .card-principal > .row > .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

          </style>